<template>
  <div>
    <mt-header title="个人信息" class="wode">
      <mt-button slot="left" @click="goback">返回首页</mt-button>
    </mt-header>
    <div class="wode-header">
      <img src="../assets/img/person.png" alt="" />
      <router-link to="/register">注册</router-link>&nbsp;
      <router-link to="/login">登录</router-link>
    </div>
    <div class="wode-main">
      <div>
        <h2>我的服务</h2>
        <div class="item-server">
          <div>
            <img src="/img/wode/kefu.png" alt="" />
            <p>客服中心</p>
          </div>
          <div>
            <img src="/img/wode/shoucang0.png" alt="" />
            <p>商品收藏</p>
          </div>
          <div>
            <img src="/img/wode/wodeyouhuijuan.png" alt="" />
            <p>我的优惠</p>
          </div>
        </div>
      </div>
      <div>
        <h2>我的功能</h2>
        <div class="item-server">
          <div>
            <img src="/img/wode/shoucang.png" alt="" />
            <p>我的收藏</p>
          </div>
          <div>
            <img src="/img/wode/zuji.png" alt="" />
            <p>我的足迹</p>
          </div>
          <div>
            <img src="/img/wode/pingjia.png" alt="" />
            <p>我的评价</p>
          </div>
          <div>
            <img src="/img/wode/dizhi.png" alt="" />
            <p>我的地址</p>
          </div>
        </div>
      </div>
      <div>
        <h2>商家管理</h2>
        <div class="item-server">
          <div>
            <img src="/img/wode/jiaruwomen.png" alt="" />
            <p>商家入驻</p>
          </div>
        </div>
      </div>
    </div>

    <mt-tabbar v-model="selected">
      <mt-tab-item id="shouye">
        <img
          :src="
            require(`@/assets/img/main_${selected == 'shouye' ? '1' : '0'}.png`)
          "
          alt=""
          slot="icon"
        />
        首页</mt-tab-item
      >
      <mt-tab-item id="dingdan">
        <img
          :src="
            require(`@/assets/img/dingdan_${selected == 'dingdan' ? '1' : '0'}.png`)
          "
          alt=""
          slot="icon"
        />
        订单</mt-tab-item
      >
      <mt-tab-item id="wode">
        <img
          :src="
            require(`@/assets/img/me_${selected == 'wode' ? '1' : '0'}.png`)
          "
          alt=""
          slot="icon"
        />
        我的</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>
<style scoped>
.wode{
  background-color: #cd5c5c;
}
.wode-header img {
  width: 15%;
  height: 15%;
  border-radius: 5px;
  border: 1px solid #eee;
  margin: 10px 10px 30px 10px;
}
.wode-main{
  width: 90%;
  margin: auto;
}
.wode-main h2{
  color:#cd5c5c;
  font-size: 18px;
}
.wode-main .item-server {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0;
  border-bottom:1px solid #dfdfdf;
  padding:10px 0;
}
.item-server div{
  text-align: center;
}
</style>


<script>
export default {
  data() {
    return {
      selected: "wode",
    };
  },
  methods:{
    goback(){
      this.$router.push('/');
    }
  },
  watch: {
    selected(newValue, oldValue) {
      if (newValue == "shouye") {
        this.$router.push("/");
      } else {
        this.$router.push("/dingdan");
      }
    },
  },
};
</script>